﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>5.relative和absolute实现布局效果</title>
    <script>
        //使用相对定位和绝对定位实现的两例布局。在前面的基础上，div-1进行相对定位，而div-1a和div-1b进行绝对定位，从而实现两列布局的效果：
        //这样的制作只是用来说明absolute的作用，如果只能实现上面的效果，可能在实际制作中并不完美，为了让其更完美一些，在这个基础上我们在来看下面这一步。
    </script>
    <style>
            #example {
				float: right;
			}
 
			#example p {
				margin: 0 0.25em;
				padding: 0.25em 0;
			}
			#div-before,
			#div-after {
				background-color: #88d;
				color: #000;
			}
 
			#div-1 {
				width: 400px;
				background-color: #000;
				color: #fff;
			}
 
			#div-1-padding {
				padding: 10px;
			}
 
			#div-1a {
				background-color: #d33;
				color: #fff;
			}
 
			#div-1b {
				background-color: #3d3;
				color: #fff;
			}
 
			#div-1c {
				background-color: #33d;
				color: #fff;
			}

            #div-1 {
			    position:relative;
			}
			#div-1a {
			    position:absolute;
			    top:0;
			    right:0;
			    width:200px;
			}
			#div-1b {
			    position:absolute;
			    top:0;
			    left:0;
			    width:200px;
			}
    </style>
</head>
<body>
    <div id="example">
        <div id="div-before">
            <p>id = div-before</p>
        </div>
        <div id="div-1">
            <div id="div-1-padding">
                <p>id = div-1</p>
                <div id="div-1a">
                    <p>id = div-1a</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
                </div>
                <div id="div-1b">
                    <p>id = div-1b</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
                </div>
                <div id="div-1c">
                    <p>id = div-1c</p>
                </div>
            </div>
        </div>
        <div id="div-after">
            <p>id = div-after</p>
        </div>
    </div>
</body>
</html>